<template>
  <div class="home">
    <div class="nav">
        <div class="nav-box">
          <div class="nav-greet">{{ greet }}</div>
          <div class="nav-name" @click="toMy">{{AccountData.nickName}}</div>
        </div>
        <div class="seach-box">
          <van-search
            v-model="srachValue"
            shape="round"
            placeholder="请输入搜索关键词"
            @input="isShow(srachValue)"
            @search="search(srachValue)"
          />
        </div>
    </div>

    <div class="h-conent" v-if="isOpen===0">
      <div class="h-banner">
        <van-swipe
          class="my-swipe"
          :loop="true"
          :width="355"
          :autoplay="2000"
          indicator-color="tomato"
          style='height:240px'
        >
          <van-swipe-item v-for="(item, index) in images" :key="index">
            <img :src="item.bannerImg" id="img" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="h-title">
        <div class="ishot-box">热卖推荐</div>
      </div>

      <div class="h-item">
        <div class="hot-items" 
        v-for="(item, index) in hotType" 
        :key="index"
        @click="toDetail(item.pid)"
        >
          <product :pro="item">
            <template #hot>
              <div class="mask">hot</div>
            </template>
          </product>
        </div>
      </div>
    </div>
    <div class="search-box" v-if="isOpen===1">
      <div class="search-conent">
        <div class="search-item"
        v-for="(item,index) in AllSearchData"
        :key="index"
        @click="toDetail(item.pid)"
        >
          <product :pro="item"></product>\
        </div>
      </div>
    </div>
    <div class="search-box" v-if="isOpen===2">
      <van-empty description="没有找到相关商品!" />
    </div>
  </div>

</template>

<script>
import Product from "../components/Product.vue";
export default {
  name: "Home",
  data() {
    return {
      srachValue: "",
      //轮播图照片
      images: [],
      //热门推荐
      hotType: [],
      //搜索商品
      AllSearchData:[],
      //时间
      greet: "",
      //输入框
      srachValue:'',
      
      isOpen:0,

      AccountData:[]
    };
  },
  components: { Product },
  created() {
    this.getslideshowType();
    this.getHotType();
    this.getTiem();
    this.personal();
  },
  methods: {
    //获取轮播图照片
    getslideshowType() {
      this.axios({
        method: "get",
        url: "/banner",
      })
        .then((res) => {
          // console.log(res);
          if (res.data.code === 300) {
            this.images = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //获取最新推荐
    getHotType() {
      this.axios({
        method: "get",
        url: "/typeProducts",
        params: {
          key: "isHot",
          value: 1,
        },
      })
        .then((res) => {
          // console.log("获取最新推荐", res);
          if (res.data.code === 500) {
            this.hotType = res.data.result;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //判断当前时间
    getTiem() {
      let date = new Date();
      // console.log("date", date);
      let hours = date.getHours();
      if (hours > 0 && hours < 6) {
        this.greet = "晚上好!";
      } else if (hours >= 6 && hours < 12) {
        this.greet = "上午好!";
      } else if (hours >= 12 && hours < 18) {
        this.greet = "下午好!";
      } else {
        this.greet = "晚上好!";
      }
    },

    //点击跳转详情
    toDetail(pid){
      this.$router.push({name:'Detail',query:{pid}})
    },

    //判断
    isShow(val){
      if(val.length===0){
        this.isOpen = 0
      }
    },
    //搜索商品
    search(sr){
      this.isOpen = false;
      this.axios({
        method:'get',
        url:'/search',
        params:{
          name:sr
        },
      }).then(res=>{
        // console.log(res);
        if(res.data.code==="Q001" && res.data.result.length !=0){
          this.AllSearchData = res.data.result;
          this.isOpen=1;
        }else if(res.data.code==="Q001" && res.data.result.length ===0){
          this.isOpen=2;
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    //跳转我的页面
    toMy(){
      this.$router.push({name: "My"});
    },
    //个人信息
    personal() {
      let tokenString = sessionStorage.getItem("token");

      this.axios({
        method: "GET",
        url: "/findAccountInfo",
        params: {
          tokenString,
        },
      })
        .then((res) => {
          // console.log("个人资料", res);
          // if (res.data.code == 700) {
          //   //用户未登录, 拦截操作, 通知用户去登录
          //   this.$toast("请先登录");
          //   setTimeout(() => {
          //     this.$router.push({ name: "Login" });
          //   }, 2000);

          //   return;
          // }
          if(res.data.code==="B001"){
            this.AccountData = res.data.result[0];
          }
          // console.log("this.AccountData",this.AccountData);
        })
        .catch((err) => {
          console.log(err);
        });
    }
  },
};
</script>

<style lang="less" scoped>
.home {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:#f7f7f7;
}
.nav{
  display: flex;
  background-color: #fff;
  align-items: center;
  padding: 8px 0;
}
.nav-box {
  display: flex;
  align-items: center;
  width: 120px;
  margin-left: 20px;
  font-weight: bold;
}
.nav-greet {
  font-size: 16px;
  color: #666;
  font-weight: bold;
}
.nav-name {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #0c34ba;
}
.h-conent {
  position: fixed;
  top: 50px;
  right: 0;
  bottom: 50px;
  left: 0;
  margin: 0 auto;
  overflow-y: auto;
  padding: 10px;
  // background-color: red;
}
.h-title {
  padding: 10px 0;
  background-color: #fff;
  margin: 10px 0;
}
.ishot-box {
  width: 90px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: white;
  background-color: #0c34ba;
  font-size: 14px;
  border-top-right-radius: 20px;
}
.h-item {
  display: flex;
  flex-wrap: wrap;
}
.hot-items {
  width: calc(~"50% - 5px");
  margin-right: 10px;
  margin-bottom: 10px;
  &:nth-child(2n) {
    margin-right: 0;
  }
}
.hot-items {
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
}
.search-conent{
  display: flex;
  flex-wrap: wrap;
}
.search-item{
  width: calc(~"50% - 5px");
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  &:nth-child(2n){
    margin-right: 0;
  }
}
/deep/.search-box{
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 10px;
  overflow-y: auto;
}
/deep/.mask {
  position: absolute;
  left: 15px;
  top: 0;
  z-index: 9999;
  background-color: #0c34ba;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  color: white;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

/deep/.van-swipe-item img {
  width: 355px !important;
  height: 240px !important;
  border-radius: 20px;
}
/deep/.van-swipe-item {
  width: 355px;
}
/deep/[data-v-fae5bece].van-swipe {
  position: relative;
  height: 240px;
  border-radius: 20px;
}
/deep/ .auto-img {
  border-radius: 10px !important;
}
/deep/.product-img {
  position: relative;
}
/deep/ .product .product-zhname[data-v-3cf4ef6f] {
  font-size: 15px;
  font-weight: 400;
  color: #727e89;
}
/deep/ .product .product-enname[data-v-3cf4ef6f] {
  color: #c1b9b8;
  padding: 5px 0;
}
/deep/ .product .product-price[data-v-3cf4ef6f] {
  display: none;
}
/deep/ .h-title[data-v-fae5bece] {
  padding: 13px 0;
}
/deep/ .van-swipe__track {
  position: absolute;
  top: 0;
  width: 1600px;
}
/deep/ .van-swipe__indicators {
  bottom: 10px;
}
/deep/ .van-search {
  padding: 0;
}
/deep/ .van-search__content {
  margin-left: 5px;
}
</style>
